<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line" />
            <span class="details_HeaderTitle">充值信息</span>
          </div>
          <div style="display: flex">
            <el-button v-if="form.status == 0" type="danger" @click="ApprovedClick" v-permission="['askfor.confirm']">审核通过</el-button>
            <el-button v-else type="green"  v-permission="['askfor.confirm']">已审核</el-button>
          </div>
        </div>
        <div class="deleted_OrderHeader" style="border-left: none;">
          <el-row :gutter="24">
            <el-col :span="12">
              <span class="deleted_Row_Headings">充值余额：</span>
              <span class="deleted_OrderTitle" style="color:red">{{ form.credit }}</span>
            </el-col>
            <el-col :span="12">
              <span class="deleted_Row_Headings">当前余额：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{ memberList.balance }}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <span class="deleted_Row_Headings">销售日期：</span>
              <span class="deleted_OrderTitle">{{ form.createDate | dateFormatter }}</span>
            </el-col>
            <el-col :span="12">
              <span class="deleted_Row_Headings">订单状态：</span>
              <span style="text-align: left" class="table_ContentTitle" v-if="form.status == 0">待审核</span>
              <span style="text-align: left" class="table_ContentTitle" v-if="form.status == 1">已确认</span>
              <span style="text-align: left" class="table_ContentTitle" v-if="form.status == 2">已完成</span>
              <span style="text-align: left" class="table_ContentTitle" v-if="form.status == 3" >已关闭</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line" />
          <span class="details_HeaderTitle">买家信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">客户名称：</span>
                <span style=" color: #409EFF; margin-left: 5px;  display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">{{ form.name }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <span class="deleted_Row_Headings">电话：</span>
              <span class="deleted_OrderTitle">{{ form.mobile }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <span class="deleted_Row_Headings">描述：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{ form.memo }}</span>
            </el-col>
          </el-row>

          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">会员等级：</span>
                <span class="deleted_OrderName" v-if="memberList.member.vip">{{ memberList.member.vip }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">地址：</span>
                <span class="deleted_OrderName">{{ memberList.member.address }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">仓库：</span>
                <span class="deleted_OrderName">{{ memberList.member.shopName }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">邮箱：</span>
                <span class="deleted_OrderName">{{ memberList.member.email }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

    </el-card>
    <el-dialog v-el-drag-dialog title="接单" :visible.sync="sendType" width="60%" append-to-body :before-close="sendClose">
      <div style="position: relative;">
        <div style="display: flex;justify-content: flex-end;align-items: center;margin-top: 20px">
          <el-button v-permission="['order.audit']" type="primary" :loading="clicked" @click="delivery">接单</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="物流信息" width="60%" :visible.sync="logisticsVisible">
      <div class="el-dialog-div">
        <el-table :data="logisticsData" border>
          <el-table-column label="物流单号" width="140">
            <template slot-scope="scope">{{ scope.row.trackingNo || '暂未送货' }}</template>
          </el-table-column>
          <el-table-column label="商品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 100%; height: 100%;">
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                <span>{{ scope.row.name }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="商品规格">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.spec" placement="top">
                <span>{{ scope.row.spec }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-link type="primary" @click="logisticDetail(scope.row.trackingNo)">{{ scope.row.trackingNo? '查看物流': ''
                }}
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog title="物流查询" width="60%" :visible.sync="logisticsDetailVisible">
      <div class="el-dialog-div">
        <el-table :data="logisticsDetailData">
          <el-table-column prop="ftime" label="时间" width="170" />
          <el-table-column label="物流查询">
            <template slot-scope="scope">
              <span :style="{'color': scope.$index===0? '#409EFF': ''}">{{ scope.row.context }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog title="套餐报停" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div style="width: 100%;display: flex;justify-content: center;align-items: center">
        <el-date-picker v-model="pauseDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pauseClick">确 定</el-button>
      </span>
    </el-dialog>
    <!--    地址修改-->
    <el-dialog title="地址修改（点击选择地址）" :visible.sync="addressType" width="70%" :before-close="addressClose">
      <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column property="consignee" label="姓名" width="120">
        </el-table-column>
        <el-table-column property="phone" label="电话" width="120">
        </el-table-column>
        <el-table-column property="address" label="详细地址">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressType = false">取 消</el-button>
        <el-button type="primary" @click="chooseClick">确 定</el-button>
        <el-button type="primary" @click="addressAdd">新增地址</el-button>
      </span>
    </el-dialog>
    <el-dialog title="打印安装教程" :visible.sync="isNoInstall" width="600px" v-el-drag-dialog append-to-body
      :before-close="installClose">
      <div style="position: relative;height: 30vh;overflow: auto">
        <div>
          <span style="font-weight: bold">未检测到您的打印控件，请检查是否安装以下两个打印控件</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">1、install_lodop64.exe（或者32位，根据自己的电脑位数）</span>
          <span
            style="display: block;margin-left: 20px;line-height: 20px">2、CLodopPrint_Setup_for_Win32NT.exe（32位64位皆可用）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">3、苹果系统暂时无法支持</span>
          <span style="font-weight: bold">已经下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果已有两个软件，请检查是否已经打开服务。</span>
          <span style="font-weight: bold">未下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果没有两个控件的客户，您可以点击下面的下载地址自行前往下载<a
              style="color: #00B6FB;margin-left: 20px" target="view_window"
              href="http://www.c-lodop.com/download.html">下载地址</a></span>
          <span
            style="display: block;margin-left: 20px;line-height: 20px">(提示：请下载Lodop发型包Windows版，里面包含所需的两个控件，安装完后请刷新本页面方可使用打印，install_lodop64.exe软件下载完打开即可，
            CLodopPrint_Setup_for_Win32NT.exe需要安装，您可以直接选择开机自动启动)</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="新增地址" :visible.sync="receiverVisible" width="950px" v-el-drag-dialog append-to-body
      :before-close="receiverClose">
      <div style="position: relative;height: 60vh;overflow: auto">
        <receiverAdd @orderReceiver="orderReceiver" pathType="0" :memberId="form.memberId"></receiverAdd>
      </div>
    </el-dialog>
    <el-dialog title="修改配送时间" :visible.sync="timeVisible" width="650px" v-el-drag-dialog append-to-body
      :before-close="timeClose">
      <div>
        <div style="display: flex; flex-direction: column;">
          <el-select v-model="weekDate" multiple placeholder="请选择" @change="weekClick">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 20px">
          <span>预计送达时间：{{date | dateFormatter}}</span>
        </div>
        <div style="display: flex;justify-content: flex-end">
          <el-button @click="cancelTime">取 消</el-button>
          <el-button type="primary" @click="timeClick">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <orderPrintTwo @isTeach="isTeach" v-if="isPrintShow==true" :shopName="shopName" :form="form"
      printName="order_10200_0" :sendForm="sendForm" :officeName="officeName" ref="orderPrintTwo"></orderPrintTwo>
  </div>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import orderPrint from '@/components/OrderPrint/orderPrint'
  import orderPrintTwo from '@/components/OrderPrint/orderPrintTwo'
  import {
    EventBus
  } from '@/api/eventBus'
  import {
    find,
    examine,
    add
  } from '@/api/deposit'
  import { find as memberList } from '@/api/member'


  import {
    confirm as askforConfirm,
    received as askforReceived,
    cancel as askforCancel,
    refunds as askforRefunds
  } from '../../api/askfor'

  import {
    update as memberupdate
  } from '@/api/member'
  import {
    trackingNo_query,
    delivery_query
  } from '@/api/shipping'
  import utils from '../../utils/utils.js'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import {
    mapGetters
  } from 'vuex'
  import {
    list as addressList
  } from '@/api/receiver'
  import receiverAdd from '@/views/receiver/add'
  export default {
    naem: 'order-view',
    directives: {
      elDragDialog,
      permission
    },
    data() {
      return {
        memberList:{member:{vip:"",address:"",shopName:""}},
        sendForm: {},
        bomType: '',
        clicked: false,
        isPrintShow: false,
        deliveryClick: false,
        returnClick: false,
        memoName: '买家',
        signName: '客户',
        week: [],
        weekDate: [],
        form: {
          id: ''
        },
        weekTime: '',
        timeVisible: false,
        times: null,
        pageNum: 1,
        options: [{
          value: '1',
          label: '周一'
        }, {
          value: '2',
          label: '周二'
        }, {
          value: '3',
          label: '周三'
        }, {
          value: '4',
          label: '周四'
        }, {
          value: '5',
          label: '周五'
        }, {
          value: '6',
          label: '周六'
        }, {
          value: '7',
          label: '周七'
        }],
        pageSize: 20,
        isNoInstall: false,
        isShipping: true,
        logisticsData: [], // 物流信息
        logisticsDetailData: [], // 物流详情
        orderLog: [],
        memberName: '',
        vipName: '',
        officeName: '',
        title: '销售',
        date: '',
        operatorName: '',
        sendType: false,
        orderStatus: 0,
        shippingMethod: '',
        paymentStatus: 0,
        shippingStatus: 0,
        returnsType: false,
        logisticsVisible: false,
        logisticsDetailVisible: false,
        payments: [],
        pdfUrl: '',
        memberMemo: '',
        weekType: false,
        orderPlans: [],
        dialogVisible: false,
        addressType: false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        pauseDate: '',
        tableData: [],
        currentRow: null,
        receiverId: '',
        receiverVisible: false,
        shopName: ''
      }
    },
    watch: { // 只要路由发生变化就重新获取数据
      $route(newVal, oldVal) {
        console.log(newVal)
        if (newVal.name == 'order-view' && newVal.query.id != this.form.id) {
          this.form.id = newVal.query.id
          this.findClick()
        }
      }
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    filters: {
      watchStatus(val) {
        if (val == 0) {
          return '待付款'
        } else if (val == 1) {
          return '已付款'
        } else if (val == 2) {
          return '待退款'
        } else if (val == 3) {
          return '已退款'
        }
      },
      watchOrderMatch(val) {
        if (val == 0) {
          return '线上订单'
        } else if (val == 1) {
          return '人工报单'
        } else if (val == 2) {
          return '门店自提'
        }
      },
      watchShippingMethod(val) {
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城配送'
        }
      },
      watchTaxType(val) {
        if (val == 0) {
          return '不开票'
        } else if (val == 1) {
          return '增票'
        } else if (val == 2) {
          return '普票'
        }
      },
      watchPayment(val) {
        if (val == 0) {
          return '等待支付'
        } else if (val == 1) {
          return '支付成功'
        } else if (val == 2) {
          return '超时关闭'
        } else if (val == 3) {
          return '付款失败'
        }
      },
      watchNum(val) {
        if (val == undefined) {
          return 0
        } else {
          return val
        }
      },
      planStatus(val) {
        if (val == '0') {
          return '待配送'
        } else if (val == '1') {
          return '配送中'
        } else if (val == '2') {
          return '配送完成'
        }
      }
    },
    created() {
      var _this = this
      this.times = new Date().getSeconds()
      _this.form.id = this.$route.query.id
      _this.form.memberId = this.$route.query.memberId
      let date = new Date()
      _this.findClick()
      EventBus.$on('order-edit', res => { // 监听新增完毕
        // 更新列表数组
        console.log(res)
        _this.form.id = res.id
        _this.findClick()
      })
      EventBus.$on('order-view', res => { // 监听新增完毕
        // 更新列表数组
        console.log(res)
        _this.form.id = res.id
        _this.findClick()
      })
      // this.calculateEstimateDateClick()
      this.loadMember('')
    },
    components: {
      // sendList,
      // returnsList,
      receiverAdd,
      orderPrint,
      orderPrintTwo
    },
    methods: {
      async  loadMember(query) {
        var _this = this

        let params = new URLSearchParams();
        await memberList(this.form.memberId).then(response => {
          console.log("这是客户信息");
          console.log(response);
          _this.memberList = response.data
          console.log(_this.memberList,"321")
        })
      },
      weekClick(data) {
        this.weekTime = data.join('')
        this.calculateEstimateDateClick()
      },
      calculateEstimateDateClick() {
        var _this = this
        console.log(_this.weekTime)
        const params = new URLSearchParams()
        params.append('week', _this.weekTime)
        calculateEstimateDate(params).then(response => {
          console.log(response)
          _this.date = response.data.estimateDate
        }).catch(error => {
          console.log('error!!')
        })
      },
      timeClose() {
        this.timeVisible = false
        this.findClick()
      },
      installClose() {
        this.isNoInstall = false
      },
      changeTime() {
        this.timeVisible = true
      },
      cancelTime() {
        this.timeVisible = false
        this.findClick()
      },
      timeClick() {
        if (this.weekTime == '') {
          this.$message({
            message: '请选择配送时间',
            offset: 120,
            center: true
          })
          return
        }
        const params = new URLSearchParams()
        params.append('orderId', this.form.id)
        params.append('weekTime', this.weekTime)
        updateWeekAndReceiver(params).then(res => {
          console.log(res)
          this.$message({
            message: '修改成功',
            offset: 120,
            center: true
          })
          this.timeVisible = false
          this.findClick()
        }).catch(err => {
          console.log(err)
        })
      },
      recoveryClick() {
        var _this = this
        this.$confirm('确定恢复?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = new URLSearchParams()
          params.append('orderId', this.form.id)
          pause(params).then(res => {
            console.log(res)
            _this.$message({
              message: '恢复报停成功',
              offset: 120,
              center: true
            })
            this.dialogVisible = false
            _this.findClick()
          }).catch(err => {
            console.log(err)
          })
        })

      },
      findClick() {
        var _this = this
        var form = {}
        find(this.form.id).then(response => {
          form = response.data
          this.sendForm = form
          _this.form = response.data.deposit
          if (!utils.isNull(response.data.order.itemList)) {
            var packageForm = []
            response.data.order.itemList.forEach(function(item) {
              if (item.subType == 1) {
                packageForm.push(item)
              }
            })
            if (packageForm.length > 0) {
              _this.weekType = true
            } else {
              _this.weekType = false
            }
          }
        }).catch(error => {})
      },
      askforRefundsClick() {
        this.$confirm('确认退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          askforRefunds(this.form.askfor.id).then(response => {
            this.findClick()
          })
        })

      },
      ApprovedClick() {
        this.$confirm('同意审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          examine(this.form.id).then(response => {
            console.log(response,"response")
            setTimeout(()=>{
              this.loadMember('')
              this.findClick()
            },1000)
          })
        })

      },

      askforConfirmClick() {
        this.$confirm('同意退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          askforConfirm(this.form.askfor.id).then(response => {
            this.findClick()

          })
        })

      },
      askforCancelClick() {
        this.$confirm('拒绝退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          askforCancel(this.form.askfor.id).then(response => {
            this.findClick()
          })
        })
      },
      memberClick() {
        var _this = this
        var form = {
          id: _this.form.memberId,
          memo: _this.memberMemo
        }
        memberupdate(form).then(response => {
          this.$message({
            message: '修改成功',
            offset: 120,
            center: true
          })
        }).catch(error => {

        })
      },
      editClick() {
        this.$router.push({
          path: '/order/edit',
          query: {
            id: this.form.id
          }
        })
      },
      cancelClick() {
        this.$confirm('确定关闭?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel(this.form.id).then(response => {
            console.log(response)
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
            this.findClick()
          }).catch(error => {})
        })

      },
      confirmClick() {
        this.$confirm('是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirm(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
            this.findClick()
          }).catch(error => {})
        })

      },
      refundClick() {
        refunds(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          })
          this.findClick()
        }).catch(error => {})
      },
      sendClick() {
        this.sendType = true
        this.times = new Date().getSeconds()
      },
      sendClose() {
        this.sendType = false
      },
      returnsClick() {
        this.returnsType = true
        this.times = new Date().getSeconds()
      },
      returnsClose() {
        this.returnsType = false
      },
      logisticsClick() { // 查看物流
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('orderId', this.form.id)
        trackingNo_query(params).then(res => {
          console.log(res)
          this.logisticsData = res.data.data
          this.logisticsVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      logisticDetail(trackingNo) {
        this.logisticsDetailData = []
        delivery_query({
          trackingNo
        }).then(res => {
          console.log(res)
          this.logisticsDetailData = res.data.data
          this.logisticsVisible = false
          this.logisticsDetailVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      delClick() {
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(_this.form.id).then(response => {
            EventBus.$emit('order-delete', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({
              visitedViews
            }) => {
              _this.$router.push({
                path: '/order/list'
              })
            }) // 关闭当前tab回到列表
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }).catch(error => {
            console.log('error!!')
          })
        }).catch(() => {})
      },
      delivery() {
        this.clicked = true
        this.$confirm('确认发货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
            this.clicked = false
          }, 2000)
          this.$refs.send.delivery()
        }).catch(res => {
          this.clicked = false
        })

      },
      aDeliveryClick() {
        this.deliveryClick = true
        this.$confirm('确认发货并出库?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
            this.deliveryClick = false
          }, 2000)
          this.$refs.send.aDeliveryClick()
        }).catch(() => {
          this.deliveryClick = false
        })

      },
      returnGoods() {
        this.returnClick = true
        this.$confirm('确认退货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
            this.returnClick = false

          }, 2000)
          this.$refs.returns.returnsClick()
          this.returnsType = false
        }).catch(() => {
          this.returnClick = false
        })

      },
      aReturnGoods() {
        this.$refs.returns.aReturnsClick()
      },
      isTeach(data) {
        this.isNoInstall = data
      },
      printClick() {
        this.isPrintShow = true
        setTimeout(() => {
          this.$refs.orderPrintTwo.printPdf()
        }, 1000)
      },
      printSetupClick() {
        this.isPrintShow = true
        setTimeout(() => {
          this.$refs.orderPrintTwo.printSetUp()
        }, 1000)
      },
      exportViewClick() {
        this.exportView = process.env.VUE_APP_BASE_API + '/admin/order/export/' + this.form.id + '?token=' + this.token
        window.open(this.exportView)
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      pauseClick() {
        var _this = this
        const params = new URLSearchParams()
        params.append('beginDate', this.pauseDate.length > 0 ? this.pauseDate[0] : '');
        params.append('endDate', this.pauseDate.length > 0 ? this.pauseDate[1] : '');
        params.append('orderId', this.form.id)
        pause(params).then(res => {
          console.log(res)
          _this.$message({
            message: '报停成功',
            offset: 120,
            center: true
          })
          this.dialogVisible = false
          _this.findClick()
        }).catch(err => {
          console.log(err)
        })
      },
      //  修改地址
      addressClose() {
        var _this = this
        _this.addressType = false
        this.receiverId = ''
      },
      addressClick() {
        var _this = this
        _this.loadReceiver()
        _this.addressType = true
      },
      chooseClick() {
        var _this = this
        if (_this.receiverId == '') {
          _this.$message({
            message: '请选择地址',
            offset: 120,
            center: true
          })
          return
        }
        const params = new URLSearchParams()
        params.append('orderId', _this.form.id)
        params.append('receiverId', _this.receiverId)
        updateWeekAndReceiver(params).then(res => {
          console.log(res)
          _this.$message({
            message: '修改成功',
            offset: 120,
            center: true
          })
          _this.addressType = false
          _this.receiverId = ''
          _this.findClick()
        }).catch(err => {
          console.log(err)
        })
      },
      loadReceiver() {
        var _this = this
        const params = new URLSearchParams()
        params.append('memberId', _this.form.memberId, )
        addressList(params).then(res => {
          console.log(res)
          _this.tableData = res.data.data
        }).catch(err => {
          console.log(err)
        })
      },
      handleCurrentChange(val) {
        console.log(val)
        this.currentRow = val;
        this.receiverId = val.id
      },
      //  新增地址
      addressAdd() {
        var _this = this
        _this.receiverVisible = true;
      },
      receiverClose() {
        this.receiverVisible = false;
      },
      orderReceiver(data) {
        var _this = this;
        _this.tableData.push(data.data)
        _this.receiverClose()
      },
      handleCommand(command) {
        if (command == 'printSetupClick') {
          this.printSetupClick()
        } else {
          this.exportViewClick()
        }
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .submit_payMethod_Content_Date {
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
    line-height: 36px;
    /* display: block; */
    /* margin-top: 10rpx; */
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    border-left: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {}

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 155px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
  }

  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .product_header_Plans {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  .product_header_Plans_left {
    display: flex;
    align-items: center;
  }
  .deleted_OrderHeader .el-col-12{
    margin-top: 25px!important;
  }
  .deleted_OrderContent[data-v-6d7499c2]{
    margin-top: 28px;
  }
</style>
